<template>
	<uni-list>
		<uni-list-item v-for="(item,index) in list" :title="item.title" :note="item.note" link :to="item.to" @click="onClick($event,1)" :key="index" ></uni-list-item>
	</uni-list>
</template>

<script>

	export default {
		data() {
			return {
				list: [
					// {title:'tabs页面',note:'mo-tabs-swiper',to:'/pagesub/components/mo-tabs-swiper/index'},
					// {title:'tabs页面',note:'mo-swiper-list',to:'/pagesub/components/swiper-list'},
					{title:'日历',note:'mo-simple-date',to:'/pagesub/components/mo-simple-date/index'},
					{title:'粘性布局',note:'mo-sticky',to:'/pagesub/components/mo-sticky/index'},
					{title:'悬浮球',note:'mo-fab',to:'/pagesub/components/mo-fab/index'},
					{title:'虚拟列表',note:'mo-virtual-scroller',to:'/pagesub/components/mo-virtual-scroller/index'},
					{title:'swiper页面',note:'mo-scroll-swiper',to:'/pagesub/components/mo-scroll-swiper/index'},
					{title:'商品分类列表',note:'mo-product-list',to:'/pagesub/components/mo-product-list/index'},
					{title:'时间轴',note:'mo-steps',to:'/pagesub/components/mo-steps/speed'},
					{title:'Svg-Png',note:'mo-steps',to:'/pagesub/components/mo-svg-png/index'},
					
					// #ifdef MP-WEIXIN
					{title:'小程序分享海报',note:'生成海报',to:'/pagesub/components/share/share'},
					// #endif
					{title:'小程序分享海报2',note:'生成海报',to:'/pagesub/components/mo-share/index'},
					{title:'手写签名',note:'手写签名',to:'/pagesub/components/lime-signature/lime-signature'},
					{title:'手势锁',note:'手势锁',to:'/pagesub/components/mo-gesture/index'},
				]
			}
		},
		methods: {
			onClick(time){
				console.log('跳转',time)
			},
		}
	}
</script>

<style lang="scss" scoped>
	$theme-color: rgb(255, 165, 104);
	$am-color: rgb(8, 201, 95);
	$pm-color: rgb(235, 148, 35);
	$act-color: rgb(50, 105, 223);
	page{
		background: #f8f8f8;
	}
	.mt20{
		margin-top: 20rpx;
	}
	.container {
		padding: 0 20rpx;
	}
	.colls{
		position: relative;
		display: flex;
		align-items: center;
		padding: 5rpx 0;
		color: $theme-color;
		font-size: 24rpx;
		&::before{
			display: block;
			content: '';
			margin-top: 5rpx;
			margin-right: 10rpx;
			width: 20rpx;
			height: 20rpx;
			border-radius: 10rpx;
			background-color: $theme-color;
		}
		&.am{
			color: $am-color;
			&::before{
				background-color: $am-color;
			}
		}
		&.pm{
			color: $pm-color;
			&::before{
				background-color: $pm-color;
			}
		}
		&.act{
			color: $act-color;
			&::before{
				background-color: $act-color;
			}
		}
	}
</style>
